<template>
  <view class="">
    <!-- 公共组件-每个页面必须引入 -->
    <public-module></public-module>

    <view v-if="!hasLogin">
      <u-empty text="Please log in" mode="permission"></u-empty>
    </view>


<view class="u-padding-20">
    <view class="base-panel-box">
      <view class="htitle">
        <view>我的积分</view>
      </view>
      <view class="item" v-for="(item, index) in coin_list.list" :key="index" @click="$Router.push({path: '/pages/componentsA/my/assets/flowlist',query: { id: item.id, name: item.name },}) ">
        <u-row gutter="0" justify="space-between">
          <u-col span="2">
            <image :src="item.icons"
              mode="aspectFill"
              style="width: 80rpx; height: 80rpx"/>
          </u-col>
          <u-col span="9">
            <view class="demo-layout bg-purple-light">
              <h4>{{ item.name }}</h4>
              <text>{{ item.balance_total }} {{ item.unit }}</text>
            </view>
          </u-col>
          <u-col span="1" textAlign="right">
            <u-icon name="arrow-right" color="#969799" size="14"></u-icon>
          </u-col>
        </u-row>
      </view>
    </view>
</view>

  </view>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      title: {
        "font-size": "38rpx",
      },
      coin_list: {},
      hasLogin: false,
      loadStatus: "loadmore",
      loadstatus: false,
      loadstxt: "loading...",
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  async onLoad() {
    this.hasLogin = this.$store.getters.loginFlag;
    let flag = await this.getcoin();
  },
  methods: {
    getcoin() {
      return new Promise((resolve, reject) => {
        this.loadstatus = true;
        this.$api("assets.coin_list", {})
          .then((res) => {
            if (res.code == 200) {
              this.coin_list = res.data;
            }
            resolve(true);
            this.loadstatus = false;
          })
          .catch((e) => {
            this.loadstatus = false;
            resolve(false);
          });
      });
    },
  },
};
</script>

<style lang="scss">
	.flexView{
		width: 100%;
		margin: 0 auto;
		background: linear-gradient(to bottom, #63E5CB, #52D3FF);
		position: relative;
		display: inline-block;
		height: 140rpx;
		margin-bottom: 160rpx;
	}
.wallet-panel-box {
      width: 94%;
      background: #FAFAFF;
      border-radius: 24rpx;
	  padding-top: 0rpx;
      margin: auto 3%;
      box-shadow: 0 6rpx 10rpx #EEEEEE;
	  top:20px;
	  position: absolute;
	  height: 260rpx;
		
  .bg {
    //background: url(@/static/boxbg.png) no-repeat top right;
    background-size: auto 100%;
    -o-background-size: auto 100%;
    -webkit-background-size: auto 100%;
    background-position: right 0rpx;
    .wdzc {
      padding: 20rpx;
      border-bottom: 1px solid #f1f1f1;
    }
    .wdcz {
      padding-top: 15rpx;
    }
  }
}
</style>
